import React, { Component } from "react";
import { NavBar, Carousel, Flex } from "antd-mobile";
import SearchInput from "../searchInput/SearchInput";
import "./index.scss";
import { withRouter } from "react-router-dom";
import myaxios from "../../utils/myaxios";
import axios from "axios";

class Index extends Component {
  constructor(props) {
    super(props);
    const CancelToken = axios.CancelToken;
    this.source = CancelToken.source();
  }
  state = {
    imgHeight: 170,
    showSwiper: false,
    swiper_list: [], //首页轮播图的数据
    catitems: [], //首页分类的数据
    productData: [], // 首页图片列表的数据
  };
  // 轮播图点击事件
  handleSwiperClick = (goods_id) => {
    this.props.history.push("/goodDetail/" + goods_id);
  };
  //导航图片点击
  handelCatItemClick = (params) => {
    this.props.history.push("/category");
  };
  // 图片列表的点击
  handelImgListClick = (e) => {
    let queryStr = e.target.getAttribute("data-url").split("query=")[1];
    this.props.history.push("/goodList?query=" + queryStr);
  };

  componentDidMount() {
    // 首页轮播数据
    myaxios
      .get("home/swiperdata", {
        cancelToken: this.source.token,
      })
      .then((res) => {
        this.setState({
          swiper_list: res,
          showSwiper: true,
        });
      })
      .catch((err) => console.log(err));
    // 首页导航的数据
    myaxios
      .get("/home/catitems", {
        cancelToken: this.source.token,
      })
      .then((res) => {
        this.setState({
          catitems: res,
        });
      })
      .catch((err) => console.log(err));
    // 首页列表图片的数据
    myaxios
      .get("/home/floordata", {
        cancelToken: this.source.token,
      })
      .then((res) => {
        this.setState({
          productData: res,
        });
      })
      .catch((err) => console.log(err));
  }
  componentWillUnmount() {
    this.source.cancel("主页请求取消");
  }
  render() {
    return (
      <div className="yg-index">
        {/* 首页导航条开始 */}
        <div className="yg-index-nav">
          <NavBar className="index-nav">优购商城</NavBar>
        </div>
        {/* 首页导航条结束 */}
        {/* 首页搜索框开始 */}
        <SearchInput></SearchInput>
        {/* 首页搜索框结束 */}
        {/* 首页轮播图开始 */}
        <div className="yg-index-swiper">
          {this.state.showSwiper && (
            <Carousel infinite autoplay>
              {this.state.swiper_list.map((val) => (
                <div
                  onClick={this.handleSwiperClick.bind(this, val.goods_id)}
                  key={val.goods_id}
                  style={{
                    display: "inline-block",
                    width: "100%",
                    height: this.state.imgHeight,
                  }}
                >
                  <img
                    src={val.image_src}
                    alt=""
                    style={{ width: "100%", verticalAlign: "top" }}
                    onLoad={() => {
                      window.dispatchEvent(new Event("resize"));
                      this.setState({ imgHeight: "auto" });
                    }}
                  />
                </div>
              ))}
            </Carousel>
          )}
        </div>
        {/* 首页轮播图结束 */}
        {/* 首页分类导航开始 */}
        <div className="yg-index-catitems">
          <div className="catitems-item">
            <Flex>
              {this.state.catitems.map((v) => {
                return (
                  <Flex.Item
                    key={v.image_src}
                    onClick={this.handelCatItemClick}
                  >
                    {" "}
                    <img src={v.image_src} alt={v.image_src}></img>
                  </Flex.Item>
                );
              })}
            </Flex>
          </div>
        </div>
        {/* 首页分类导航结束 */}
        {/* 首页图片列表开始 */}
        <div className="yg-index-productData">
          {this.state.productData.map((v) => {
            return (
              <div key={v.floor_title.image_src} className="productData-item">
                {/* 标题开始 */}
                <div className="product-title">
                  <img src={v.floor_title.image_src} alt="" />
                </div>
                {/* 标题结束 */}
                {/* 图片列表的开始 */}
                <div
                  className="product-image-list"
                  onClick={this.handelImgListClick}
                >
                  {v.product_list.map((vv) => {
                    return (
                      <div key={vv.image_src} className="image-list-item">
                        <img
                          data-url={vv.navigator_url}
                          src={vv.image_src}
                          alt=""
                        />
                      </div>
                    );
                  })}
                </div>
              </div>
            );
          })}
        </div>
        {/* 首页图片列表结束 */}
      </div>
    );
  }
}
export default withRouter(Index);
